import React, { Component } from 'react';
import _ from 'underscore';

import Select from 'lib/components/Select.jsx';

import NumberSetting from './NumberSetting.jsx';

export default class DimensionContainer extends Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      isEditing: false
    };
  } // constructor

  toggleEditorHandler() {
    this.setState({
      isEditing: !this.state.isEditing
    });
  } // toggleEditorHandler

  completeHandler(settings) {
    this.setState({
      isEditing: false
    }, () => this.props.onComplete(settings));
  } // completeHandler

  cancelHandler() {
    this.setState({
      isEditing: false
    });
  } // cancelHandler

  render() {
    let currentItem = _.chain(this.props.options)
                       .map(p => p.options)
                       .flatten(true)
                       .find(p => p.value === this.props.property)
                       .value();
    return (
      <div className="dimemsion">
        <Select
          className="select"
          value={ currentItem }
          openDisabled={ true }
          onChange={ this.props.onChanged }
          options={ this.props.options } />
        {
          currentItem.object && currentItem.object.data_type === 'number' ? (
            <div className="extension" onClick={ this.toggleEditorHandler.bind(this) }>
              <i className="iconfont">&#xe61e;</i>
            </div>
          ) : null
        }
        {
          this.state.isEditing
            ? (
              <div className="menu">
                <NumberSetting
                  { ...this.props.settings }
                  onClosing={ this.cancelHandler.bind(this) }
                  onComplete={ this.completeHandler.bind(this) } />
              </div>
            ) : null
        }
        {
          this.props.canRemove
            ? (
              <div className="iconfont remove" onClick={ this.props.onRemoving }>
                &#xe63d;
              </div>
            ) : null
        }
      </div>
    );
  } // render
}

DimensionContainer.defaultProps = {
  options: [],
  onChanged: null,
  onComplete: null,
  onRemoving: null,
  canRemove: true
}
